<template>
  <div class="box">
    <div class="menu-list">
      <div
        class="total"
        :class="{active:item.id === sel}"
        v-for="item in tabs"
        :key="item.id"
        @click="select(item)"
      >{{ item.label }}</div>
      <router-link to="/phone">
        <img src="@/../public/img/liaoliao/phone.png" alt class="phone" />
      </router-link>
    </div>

    <div class="text">
      <div class="all liaoliao" v-show="sel === 1">
        <ul>
          <template v-for="item in dataList">
            <leftSlider :index="1" @deleteItem="deleteItem(item,index)" :key="item.id">
              <router-link
                :to="{path:'/talk',query:{id:item.id}}"
                @click.native="changeTalk(item.id)"
              >
                <li>
                  <!-- <el-avatar class="imgHeader" :size="48" src="https://empty" @error="errorHandler"> -->
                  <img src="@/../public/img/peipei/peipei.png" />
                  <!-- </el-avatar> -->

                  <div class="ditel">
                    <p class="name">{{item.username}}</p>
                    <b>{{item.NewSpeak}}</b>
                  </div>

                  <i class="time">{{item.lastTime}}</i>
                  <span></span>
                </li>
              </router-link>
            </leftSlider>
          </template>
        </ul>
      </div>
      <div class="all tongzhi" v-show="sel === 2">
        <notice></notice>
      </div>
    </div>
  </div>
</template>


<script>
import leftSlider from "@/components/Del";
// import notice from '@/views/liaoliao/tongzhi.vue'

export default {
  data() {
    return {
      sel: 1,
      tabs: [
        { label: "聊聊", num: 0, id: 1 },
        { label: "通知", num: 0, id: 2 }
      ],
      dataList: this.$store.state.dataList
    };
  },
  components: {
    leftSlider
  },
  methods: {
    select(item) {
      this.sel = item.id;
    },
    deleteItem(item, index) {
      //删除聊天
    },
    errorHandler() {
      return true;
    },
    changeTalk(talkid) {
      let { dataList } = this.$store.state;

      dataList = JSON.parse(JSON.stringify(dataList));

      var data = dataList.filter(function(item) {
        return item.id == talkid;
      });
      console.log(data);

      this.$store.commit("changeTalkTo", data);

      // this.$store.commit('changeTalkId', talkid)
      // this.$store.commit('changeTalkTo', this.$store.state.dataList.map((item, index) => {
      //   if (item.id === talkid) {

      //     return JSON.parse(JSON.stringify([item]));
      //   }
      // }))
    }
  }
};
</script>



<style scoped lang='scss'>
.box {
  padding: 0 0.25rem;
  .menu-list {
    height: 0.44rem;
    display: flex;
    .phone {
      width: 0.2rem;
      height: 0.2rem;
      position: fixed;
      top: 0.25rem;
      right: 0.155rem;
    }
  }

  .total {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /*height: 100%;*/
    /*line-height: 0.44rem;*/
    text-align: center;
    float: left;
    margin-right: 0.14rem;
    font-size: 0.14rem;
    margin-top: 0.25rem;
    color: #666666;
    position: relative;
    font-family: PingFang-SC-Bold;
  }
  .total.active {
    font-size: 0.18rem;
    color: #1a1a1a;
  }
  .total::before {
    content: "11";
    font-size: 0.1rem;
    width: 0.175rem;
    height: 0.125rem;
    color: #fff;
    background-color: #e60012; /*设置红色*/
    border-radius: 0.12rem; /*设置圆角*/
    position: absolute;
    z-index: 10;
    right: 0%;
    margin-right: -0.14rem;
    margin-top: -0.08rem;
  }
  .text {
    margin-top: 0.21rem;
    .liaoliao {
      ul {
        height: 100%;
        li {
          height: 0.6rem;
          position: relative;
          display: flex;
          padding-top: 0.06rem;
          box-sizing: border-box;
          img {
            width: 0.485rem;
            height: 0.485rem;
          }
          .ditel {
            margin-left: 0.05rem;
            width: 1.3585rem;
            p {
              font-size: 0.16rem;
              line-height: 0.28rem;
              color: #666666;

              font-family: PingFang-SC-Bold;
            }
            b {
              font-size: 0.12rem;
              color: #666666;
              font-weight: 500;
              font-family: PingFang-SC-Medium;
            }
          }
          .time {
            float: right;
            text-align: right;
            font-size: 0.12rem;
            width: 1.3585rem;
            background-color: #fff;
          }
        }
        span {
          background-color: #999;
          width: 2.85rem;
          height: 0.01rem;
          display: inline-block;
          position: absolute;
          bottom: 0;
          left: 0.5rem;
        }
      }
    }
  }
}
</style>
